<template>
    <div class="layout">
        <div class="header">新闻详情</div>
        <div class="videoContainer" v-show="showVideo">
            <div class="video">
                  <video :src="newsDetail.video"></video>  
            </div>
            <div class="videoMsg">
                <div class="videoTitle">
                    <h3>{{newsDetail.title}}</h3>
                </div>
                <div class="playAndClick">
                    <div class="videoPlayTimes">11万次播放</div>
                    <div class="addToPraise">1</div>
                </div>
            </div>
        </div>
        <div class="newsArticle" v-show="showArticl">
            <div class="newsArticleTitle">
                <div class="newsTitle"><h1>{{newsDetail.title}}</h1></div>
                <div class="newsSource">
                    <div class="newsSourceImg"></div>
                    <div class="newsSourceNameAndDate">
                        <div class="name">{{newsDetail.source}}</div>
                        <div class="date">5月20日</div>
                    </div>
                </div>
            </div>
            <div class="newsArticleContent" v-html="newsDetail.details"></div>
            <div class="newsAticleClick">
                <div class="newsAticleClickImgAndClicNum">
                    <div class="newsAticleClick"></div>
                    <div class="newsAticleClickNum">{{newsDetail.loveCount}}人点赞</div>
                </div>
            </div>
        </div>
        <div class="recommendNews" v-show="showArticl">
            <div class="newItem">
                <div class="newImgOrVideo"></div>
                <div class="newsTitle"><h3>热烈祝贺添朝商城启动仪式圆满成功</h3></div>
                <div class="newsSourceAndRead">
                    <div class="newsSource">舍得新闻</div>
                    <div class="nenwsRead">1078阅读</div>
                </div>
            </div>
            <div class="newItem">
                <div class="newImgOrVideo"></div>
                <div class="newsTitle"><h3>热烈祝贺添朝商城启动仪式圆满成功</h3></div>
                <div class="newsSourceAndRead">
                    <div class="newsSource">舍得新闻</div>
                    <div class="nenwsRead">1078阅读</div>
                </div>
            </div>
            <div class="newItem">
                <div class="newImgOrVideo"></div>
                <div class="newsTitle"><h3>热烈祝贺添朝商城启动仪式圆满成功</h3></div>
                <div class="newsSourceAndRead">
                    <div class="newsSource">舍得新闻</div>
                    <div class="nenwsRead">1078阅读</div>
                </div>
            </div>
            <div class="newItem">
                <div class="newImgOrVideo"></div>
                <div class="newsTitle"><h3>热烈祝贺添朝商城启动仪式圆满成功</h3></div>
                <div class="newsSourceAndRead">
                    <div class="newsSource">舍得新闻</div>
                    <div class="nenwsRead">1078阅读</div>
                </div>
            </div>
        </div>
        <div class="recommendNews" v-show="showVideo">
            <div class="newItem" style="border-top:none;" v-for="item in newsDetail.list" :key="item.id">
                <div class="newImgOrVideo">
                    <img :src="item.pic" alt="" title="">
                    <span class="playBtn" v-show="item.type === 2"></span>
                </div>
                <div class="newsTitle"><h3>{{item.title}}</h3></div>
                <div class="newsSourceAndRead">
                    <div class="newsSource">舍得新闻</div>
                    <div class="nenwsRead">{{item.read}}{{readOrPlay=item.type===2?"次播放":"阅读"}}</div>
                </div>
            </div>
        </div>
        <div class="newsComments">
            <div class="msgAndComment">
                <div class="msgAndCommentImg"></div>
            </div>
            <div class="userComments">
                <div class="userCommentItem clearfix" v-for="item in commentList" :key="item.id">
                    <div class="userHeader">
                        <img :src="item.pic" alt="" title="">
                    </div>
                    <div class="commentContainer">
                        <div class="usernameAndReply clearfix">
                            <div class="userName">{{item.nickname}}<span class="replySomeone" v-show="item.pNickname">回复</span><span class="replyName" v-show="item.pNickname">{{item.pNickname}}</span></div>
                            <div class="reply"><a href="javascirpt:void(0);">回复</a></div>
                        </div>
                        <div class="content">{{item.content}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="moreComment">
            <div class="moreCommentsBtn" @click="getMoreComments(commentsPageNum)" v-show="leftComments>0">查看更多</div>
            <div class="moreCommentsBtn" @click="getMoreComments(commentsPageNum)" v-show="leftComments<=0">没有更多评论了！</div>
        </div>
        <div class="writeComment">
            <div class="input">
                <input type="text" placeholder="写评论...">
                <span class="commentMsg">
                    <b class="commentMsgNumber">{{newsDetail.reviewCount}}</b>
                </span>
                <span class="commentClick">
                    <b class="commentClickNumber">{{newsDetail.loveCount}}</b>
                </span>
                <span class="sendComment"></span>
            </div>
        </div>
    </div>
</template>
<style lang="less">
    @import "./static/css/newsDetail/newsDetail.less";
</style>
<script>
    export default {
        data(){
            return {
                //新闻id
                id:1,
                //根据新闻类型来展示视频或者文章页
                showVideo:false,
                showArticl:false,
                //新闻详情
                newsDetail:{},
                //评论页码
                commentsPageNum:1,
                //评论列表
                commentList:[],
                leftComments:0
            }
        },
        methods: {
            //根据url地址获取商品的id
            getNewstId:function(){
                if(this.$route.query.id) {
                    this.id = this.$route.query.id;
                }
            },
            //获取新闻详情
            getNewsDetail:function() {
                this.$http.get(`http://127.0.0.1:3000/getnewsdetail?id=${this.id}`)
                    .then((data) => {
                        if(data.body.data.rtnCode === 200){
                            this.newsDetail = data.body.data.data;
                            if(this.newsDetail.type === 1) {
                                this.showArticl = true;
                                this.showVideo =false;
                            }else {
                                this.showVideo = true;
                                this.showArticl = false;
                            }
                        }
                    })
            },
            //获取新闻评论
            getNewsComments:function(commentsPageNum){
                this.$http.get(`http://127.0.0.1:3000/getnewscomments?id=${this.id}&pageNum=${commentsPageNum}`)
                    .then((data) => {
                        if(data.body.data.rtnCode === 200) {
                            this.leftComments = data.body.data.data.total - 4;
                            this.commentList = this.commentList.concat(data.body.data.data.list);
                        }
                    }); 
            },
            //获取更多评论
            getMoreComments:function(commentsPageNum){
                commentsPageNum++;
                this.commentsPageNum = commentsPageNum;
                // this.getNewsComments(commentsPageNum);
                if(this.leftComments > 0) {
                    this.getNewsComments(commentsPageNum);
                }else {
                    alert("没有更多评论了！");
                    return;
                }
            }
        },
        created() {
            //获取id
            this.getNewstId();
            //获取新闻详情
            this.getNewsDetail();
            //获取新闻评论
            this.getNewsComments(this.commentsPageNum);
        }
    }
</script>


